<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/css/elementui/index.css">
<link rel="stylesheet" href="/css/exam/css/style.css">
<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
<div id="app">
  <div  class="p-30">
  <el-row style="font-size:14px">
    <span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.list')}}">返  回</a> | 试卷分类
  </el-row><br>
  <el-row>
    <el-button  type="primary"><a href="{{route('admin.examview.paperaddcidlist')}}" style="display:block;color:#fff;text-decoration:none">添加</a></el-button>
 </el-row> <br>
    <template>
        <el-table  :data="cidData"  border  style="width: 100%"  v-loading="loading">   
            <el-table-column fixed prop="id"  label="ID"  width="100"> </el-table-column>
            <el-table-column prop="p_sort" label="排&ensp;&ensp;序" sortable width="100"> </el-table-column>
            <el-table-column prop="p_name" label="分类名" width=""> </el-table-column>
            <el-table-column fixed="right"  label="操&ensp;&ensp;作"  width="180">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleEdit(scope.$index,scope.row)">编&ensp;&ensp;辑</el-button>
                <el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)">删&ensp;&ensp;除</el-button>
                <!--编辑弹窗-->
                <el-dialog
                      title="提&ensp;&ensp;示"
                      :visible.sync="dialogVisible"
                      width="50%"
                      :append-to-body="true"
                      >
                          <el-form :model="editCidForm" :rules="rules" ref="editCidForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="排&ensp;&ensp;序" prop="p_sort">
                                    <el-input v-model="editCidForm.p_sort"></el-input>
                                </el-form-item>
                                <el-form-item label="分类名称" prop="p_name">
                                  <el-input v-model="editCidForm.p_name"></el-input>
                                </el-form-item>
                                <el-row>
                                    <el-button @click="handleSet(scope.$index, scope.row)" type="primary">保&ensp;&ensp;存</el-button>
                                    <el-button @click="dialogVisible = false">取&ensp;&ensp;消</el-button>
                                </el-row>         
                            </el-form>
                    </el-dialog>
            </template>
            </el-table-column>
        </el-table><br>
        <!-- 分页组件 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[10,20,50,100]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="count">
            </el-pagination>
        </div>


    </template>


  </div>

</div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return { 
      loading:false,
      cidData: [], //分类数据
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10,// 每页的数据条数
      dialogVisible: false,
      count:0,
      editCidForm:{
        id:'',
        p_sort: '',
        p_name: '',
      },
      

      
      rules: {
          id: [
            { required: true, message: '请输入id', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }
          ],

          p_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
          ],
          p_type: [
            { required: true, message: '请输入排序', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }
          ],
        },
    }
  },
  created() {
    this.getciddata()
  },


  methods: {
         // 删除列表行
         deleteRow(index, rows) { 
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                   
                })
                .then(() => {
                  
                  axios.post('/admin/paper/category_del',{id:rows.id})
                    .then(response =>{
                      this.getciddata()
                        
                    }).catch(error =>{
                        console.log('请求失败：' + error);
                    })
                })
          },
          //获取分类列表     
          async getciddata() {   
            this.loading = true          
            axios.get('/admin/paper/category_index?page=' + this.currentPage +'&limit=' + this.pageSize)
            .then(response =>{
                console.log('请求成功：',response.data.data);
                this.cidData = response.data.data;
                this.count = response.data.count;
                this.loading = false;  
            }).catch(error =>{
                console.log('请求失败：' + error);
                this.loading = false;
            })
          },  
          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
				    this.currentPage = 1;
				    this.pageSize = val;
            this.getciddata()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
				    this.currentPage = val;
            this.getciddata()
          },
          // 编辑、增加页面保存方法
          handleEdit (index, row) { 
              this.dialogVisible = true//开启弹出层
              this.editCidForm.id = row.id
              this.editCidForm.p_sort = row.p_sort
              this.editCidForm.p_name = row.p_name
            },
          handleSet (index, row) {
			  let pagram = {
				  id:this.editCidForm.id,
				  p_sort:this.editCidForm.p_sort,
				  p_name:this.editCidForm.p_name
			  }			  
              axios.post('/admin/paper/category_edit',pagram)
                  .then(res => {
                  if (res.data.code == 0) {                             
                    this.$message.success("修改成功！");
                    this.dialogVisible = false;
                    this.getciddata()
                    //window.location.reload();

                  } else {
                    this.$message.info("修改失败！")
                  }
              })         
            }, 
          // 跳转页面
          goback(){
            this.$router.go(-1);
          },  
      },

})

</script>
<style scoped>
  .el-table .el-table__cell:first-child{text-align: center;}
   a{color:#409EFF;text-decoration: none;}
</style>
</html>

